
<template>
  <div class="device-gateway">
    <ContentTitle :info="ctInfo" />

    <el-tabs
      v-model="agreement"
      @tab-click="changeTab"
      class="mt-5"
      type="border-card"
    >
      <el-tab-pane label="所有" name="all"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
    </el-tabs>

    <Form @search="onSearch" @clear="onSearch"  :total="total"/>

    <List class="mt-5" :list="list" />

    <div class="bg-fff flex jc-c pt-10 pb-20">
      <el-pagination
        :current-page="currPage"
        :page-size="pageSize"
        :total="total"
        @current-change="onChange"
        background
        layout="prev, pager, next"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import List from "./gateway/List.vue";
import Form from "./gateway/Form.vue";
import ContentTitle from "@/components/ContentTitle.vue";
import * as api from "../../api/index";
export default {
  components: {
    List,
    Form,
    ContentTitle,
  },

  data() {
    return {
      ctInfo: {
        type: "设备",
        text: "网关列表",
        msg: "展示EUI、名称、状态、数据类型等设备信息，可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。",
      },

      currPage: 1,
      pageSize: 7,
      total: 0,
      agreement: "all", // 网关协议
      eui: "",
      date: "",
      online: "all",

      list: [
        {
          id: "130000199504124585",
          eui: "GL546811289",
          name: "智慧农业-网关",
          mhz: "CN666-125",
          online: true,
          country: "China",
          agreement: "LoRaWAN",
          desc: "用于智慧农业的网关设备",
          bTime: 1634592083161,
          uTime: 1634592083161,
        },
      ],
    };
  },

  created() {
    this.getList();
  },

  methods: {
    // 获取网关列表
    getList() {
      let data = {
        currPage: this.currPage,
        pageSize: this.pageSize,
        agreement: this.agreement,
        date: this.date,
        eui: this.eui,
        online: this.online,
      };
      api.$gatewayList(data).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },

    // 切换tab
    changeTab(tab) {
      this.agreement = tab.name; // 切换协议
      this.currPage = 1; // 展示第1页
      this.getList();
    },

    // 切换分页
    onChange(page) {
      this.currPage = page;
      this.getList();
    },

    // 搜索
    onSearch(data) { 
      if (data.date1 && data.date2) {
        let d1 = new Date(data.date1).getTime();
        let d2 = new Date(data.date2).getTime();
        this.date = d1 + "-" + d2;
      }
      this.currPage = 1;
      this.eui = data.eui;
      this.online = data.online;
      // 处理日期
      // 重新获取列表
      this.getList();
    } 
  },
};
</script>

<style lang="scss" scoped>
</style>
